<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Container</title>
        <link href="../../py/resources/share/control/core.css" rel="stylesheet" type="text/css" />
        <link href="../../py/resources/default/control/core.css" rel="stylesheet" type="text/css" />
		<link href="../../py/resources/default/control/icons.css" rel="stylesheet" type="text/css" />
		<link href="../../py/resources/share/form/menubuttons.css" rel="stylesheet" type="text/css" />
		<link href="../../py/resources/default/form/menubuttons.css" rel="stylesheet" type="text/css" />
		
		<link href="../../py/resources/share/control/containercontrol.css" rel="stylesheet" type="text/css" />
		<link href="../../py/resources/default/control/containercontrol.css" rel="stylesheet" type="text/css" />
		
		<link href="../../py/resources/share/container/tabcontrols.css" rel="stylesheet" type="text/css" />
		<link href="../../py/resources/default/container/tabcontrols.css" rel="stylesheet" type="text/css" />
		
        <script src="../../py/system.js" type="text/javascript"></script>
		<script src="../../py/system/dom/element.js" type="text/javascript"></script>
		<script src="../../py/system/data/collection.js" type="text/javascript"></script>
		<script src="../../py/system/controls/control.js" type="text/javascript"></script>
		<script src="../../py/system/controls/icontainercontrol.js" type="text/javascript"></script>
		<script src="../../py/system/controls/contentcontrol.js" type="text/javascript"></script>
		<script src="../../py/system/controls/scrollablecontrol.js" type="text/javascript"></script>
		<script src="../../py/system/controls/containercontrol.js" type="text/javascript"></script>
		<script src="../../py/system/controls/tabcontrol.js" type="text/javascript"></script>
		
		<script src="../../common/project/project.js" type="text/javascript"></script>
		<script src="../../common/assets/scripts/default.js" type="text/javascript"></script>
		<script src="../../common/assets/scripts/debug.js" type="text/javascript"></script>
		
		<script>
			
			a = new TabControl({
				
				tabPages: [
					new TabPage({
						dom: document.create('div', '').setHtml("adsdasd")
					}).setTitle("aaa") 
					
					,
					
					new TabPage({
						dom: document.create('div', '').setHtml("adsadadsdasd")
					}).setTitle("asdfsdfa")
				
				
				],
				
				
				renderTo: true
				
			});
			
		</script>
    </head>
    <body>
			<div class="x-tabcontrols" style="width:200px; height: 150px; ">
                <div class="x-header x-tabcontrols-header">
                    <div class="x-header-container">
                        <ul class="x-list-container x-tabcontrols-header-container">
                            <li class="x-list-content x-tabcontrols-header-content" style="*width:100px;  *height:23px;">
                                <div>
                                	<h3><span class="x-icon x-icon-layout"></span>标题1
                                	<a class="x-icon x-icon-layout"></a></h3>
								</div>
                            </li>
                            <li class="x-list-content x-tabcontrols-header-content">
                                <div><h3>标题2</h3></div>
                            </li>
                            <li class="x-list-content x-tabcontrols-header-content x-selected">
                                <div><h3>标题3</h3></div>
                            </li>
                        </ul>
						<input type="button" class="x-menu-button x-menu-left">
						<input type="button" class="x-menu-button x-menu-right">
						<input type="button" class="x-menu-button x-menu-all">
                    </div>
                </div>
                <div class="x-body x-tabcontrols-body" style="height: 500px;">
                    <div class="x-body-container x-tabcontrols-container" style="display: none;">
                        1
                    </div>
                    <div class="x-body-container x-tabcontrols-container" style="display: none;">
                        2
                    </div>
                    <div class="x-body-container x-tabcontrols-container" style="display: block;">
                        3
                    </div>
                </div>
                <div class="x-footer x-tabcontrols-footer">
                    <div class="x-footer-container">
                        <div class="x-footer-content"></div>
                    </div>
                </div>
            </div>
			
			
			
	         <div class="x-tabcontrols  x-plain" style="width:200px; height: 150px; ">
                <div class="x-header x-tabcontrols-header">
                    <div class="x-header-container">
                        <ul class="x-list-container x-tabcontrols-header-container">
                            <li class="x-list-content x-tabcontrols-header-content" style="*width:100px;  *height:23px;">
                                <div>
                                	<h3><span class="x-icon x-icon-layout"></span>标题1
                                	<a class="x-icon x-icon-layout"></a></h3>
								</div>
                            </li>
                            <li class="x-list-content x-tabcontrols-header-content">
                                <div><h3>标题2</h3></div>
                            </li>
                            <li class="x-list-content x-tabcontrols-header-content x-selected">
                                <div><h3>标题3</h3></div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="x-container x-tabcontrols-container">
                    <div class="x-content x-tabcontrols-content" style="display: none;">
                        1
                    </div>
                    <div class="x-content x-tabcontrols-content" style="display: none;">
                        2
                    </div>
                    <div class="x-content x-tabcontrols-content" style="display: block;">
                        3
                    </div>
                </div>
                <div class="x-footer x-tabcontrols-footer">
                    <div class="x-footer-container">
                        <div class="x-footer-content"></div>
                    </div>
                </div>
            </div>
    </body>
</html>
